<template>
    <a-render>
        <template #search>
          <SearchForm 
            :span="6" 
            :fields="req" 
            :list="searchFormJSON" 
            :toggle-span="[12, 12]"
            :show-toggle="false"
            @search="callbackSearch"
            @reset="callbackReset"
          ></SearchForm>
        </template>
        <Table ref="tabelRef" :data="dataList" :column="column" :operation="false" @page="changePage">
          <template #left>
            <a-button type="primary" @click="openModal('openUser')">添加用户</a-button>
          </template>
          <template #right>
            <a-button type="primary">添加用户</a-button>
          </template>
          <template #status="data">
            <Tag :type="userStatusOptions.useDictItem(data.row?.status)?.type">{{ userStatusOptions.useDictItem(data.row?.status)?.label }}</Tag>
          </template>
          <template #operation="data">
            <a-button type="link" @click="useUserReset(data.row)">重置</a-button>
            <a-button type="link" @click="toEdit(data.row)">编辑</a-button>
            <a-button type="link" v-if="isShowConfirmPay(data.row)" @click="handelconfirmPay(data.row)">确认押金</a-button>
            <a-button type="link" v-if="isShowApply(data.row)">退回押金</a-button>
            <a-button type="link" @click="toBorrowingDetailed(data.row)" v-if="isShowBorrowing(data.row)">借阅查询</a-button>
            <a-button type="link" v-if="isShowBlacklist(data.row)">黑名单</a-button>
            <a-button type="link" danger>删除</a-button>
          </template>
        </Table>
    </a-render>
    <UserForm v-model:open="state.openUser" v-if="state.openUser" title="添加用户" @ok="getList"  />
    <UserEditForm v-model:open="state.openEditUser" v-if="state.openEditUser" :row="state.row" title="编辑用户" @ok="getList"  />
    <ResetPassword v-model:open="state.openResetPassword" v-if="state.openResetPassword" :row="state.row" title="重置密码" />
    <SetRole v-model:open="state.openSetRole" v-if="state.openSetRole" :row="state.row" title="设置角色" @ok="handelOk"  />
</template>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from "vue-router"
// 组件
import SearchForm from "@/components/searchForm/search.vue"
import Table from "@/components/table/index.vue"
import Tag from "@/components/tag/index.vue"
import Switch from "@/components/control/switch/index.vue"
import { readersDeposit, userdeposit } from "@/api"
import { message } from 'ant-design-vue'
// modal
import UserForm from "../component/user.vue"
import UserEditForm from "../component/editUser.vue"
import ResetPassword from "../component/resetPassword.vue"
import SetRole from "../component/setRole.vue"
// 搜索和表格配置
import { useIndex } from "./column"
import { useSearchForm } from "./search"
// hook
import { useTable } from "@/hook/index"
import { useUser } from "./use-user"
import { useDict } from "@/dict/index.js"
const { proxy } = getCurrentInstance()
const userStatusOptions = useDict('userStatusOptions')
const tabelRef = ref(null)
const { column } = useIndex()
const { uesSetTotal, usePage, useSize, useSearch, useReset } = useTable(tabelRef)
const { useGetUserList, useDeleteUser, useStatusUser, dataList, useUserReset, useReadersdeposit } = useUser()
// 搜索配置项
const { searchFormJSON } = useSearchForm()
const router = useRouter()
// 请求参数
const req = reactive({
  pageIndex: usePage,
  pageSize: useSize,
  username: ""
})

const test = (row) => {
  console.log('row', row)
  readersDeposit({id: row.user_id})
}

const handelOk = () => {
  console.log('异步请求成功，回调')
}

const state = reactive({
  row: {},
  openUser: false,
  openEditUser: false,
  openResetPassword: false,
  openSetRole: false
})

const openModal = (key, row = {}) => {
  state.row = row
  state[key] = true
}

/**
 * 列表数据模拟 
 */
const getList = () => {
  useGetUserList(req).then(params => { // function，接收参数
    uesSetTotal(params?.content?.total)
  })
}
/**
 * 分页
 */
const changePage = (page, size) => {
  req.pageIndex = page
  req.pageSize = size
  getList()
}

/**
 * 搜索
 */
const callbackSearch = () => {
  useSearch()
  getList()
}
/**
 * 设置
 */
const callbackReset = () => {
  useReset()
  getList()
}

onMounted(() => {
  getList()
})


const toEdit = (row) => {
  console.log('row', row)
  router.push({
    path: '/readersdetailed',
    query: {
      id: row.user_id
    }
  })
}

const toBorrowingDetailed = (row) => {
  router.push({
    path: `/borrowdetailed/${row.user_id}`,
  })
}

/**
 * 删除
 */
const handelconfirmPay = (row) => {
  proxy.$confirm({
      title: "确认删除？",
      content: "是否确认该书籍?",
      okAsync: () => {
        return new Promise((resolve, reject) => { // then，catch
          userdeposit({id: row.user_id}).then(() => {
            message.success('成功确认')
            useGetUserList()
            resolve()
          }).catch(() => {
            reject()
          })
        })
      }
    })
}

/**
 * 借阅查询
 */
const isShowBorrowing = (row) => userStatusOptions.useDictItem(row?.status)?.borrowing 
/**
 * 黑名单
 */
const isShowBlacklist = (row) => userStatusOptions.useDictItem(row?.status)?.blacklist 
/**
 * 确认押金
 */
const isShowConfirmPay = (row) => userStatusOptions.useDictItem(row?.status)?.confirmPay 
/**
 * 退回押金
 */
const isShowApply = (row) => userStatusOptions.useDictItem(row?.status)?.apply 

</script>